<style scoped>
  .layout {
    border: 1px solid #d7dde4;
    /* background: #f5f7f9; */
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-logo {
    width: 69px;
    height: 69px;
    /* background: #5b6270; */
    border-radius: 3px;
    float: left;
    position: relative;
    top: -6px;
    left: 70px;
  }

  .layout-nav {
    width: 300px;
    margin: 0 auto;
    margin-right: 1cm;
  }

  .rotate-icon {
    transform: rotate(180deg);
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width 0.2s ease 0.2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width 0.2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .menu-icon {
    transition: all 0.3s;
  }
</style>
<template>
  <div class="layout">
    <Layout>
      <Header style="background: #fff; padding: 0; height: 60px;">
        <Menu mode="horizontal" theme="light" active-name="1">
          <div>
            <a style="color:#515A6E">
              <Icon @click.native="collapsedSider" :class="rotateIcon" style="float:left;margin: 18px 26px"
                type="ios-arrow-back" size="24"></Icon>
            </a>
            <h2 style="float:left">省考试院自学考试计划管理系统</h2>
          </div>
          <div class="layout-nav">
            <MenuItem name="1">
            <Icon type="ios-navigate"></Icon>计划管理
            </MenuItem>

            <MenuItem name="2">
            <Icon type="ios-paper"></Icon>助学管理
            </MenuItem>

            <Avatar style="background-color: #e44343; font-size: 16px">{{name}}</Avatar>&nbsp
            <span style="text-align: center">
              <a @click="logout()" style="color: #5b6270">注销</a>
              <!-- 个人中心
              通知-->
            </span>
          </div>
        </Menu>
      </Header>
      <Layout :style="{maxHeight:'750px'}">
        <Sider ref="side1" hide-trigger collapsible :collapsed-width="0" v-model="isCollapsed"
          :style="{background: '#fff'}">
          <Menu ref="side_menu" :active-name="$route.name" theme="light" width="auto" :open-names="subm" accordion
            style="text-align: left" @on-select="menu" @on-open-change="submenu">
            <Submenu name="MajorPlanManage">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>专业计划管理
              </template>

              <MenuItem name="MajorPlan">
              <Icon type="ios-list-box" />专业计划
              </MenuItem>

              <MenuGroup title="专业管理">
                <MenuItem name="MajorLibrary">
                <Icon type="ios-list-box" />省专业库
                </MenuItem>
                <MenuItem name="MajorClass">
                <Icon type="ios-list-box" />专业大类管理
                </MenuItem>
                <MenuItem name="NationMajor">
                <Icon type="ios-list-box" />全国专业管理
                </MenuItem>
              </MenuGroup>

              <MenuGroup title="课程管理">
                <MenuItem name="CourseLibrary">
                <Icon type="ios-list-box" />省课程库
                </MenuItem>
                <MenuItem name="NationCourse">
                <Icon type="ios-list-box" />全国课程管理
                </MenuItem>
                <MenuItem name="SetMajorCourse">
                <Icon type="ios-list-box" />专业课程管理
                </MenuItem>
              </MenuGroup>
            </Submenu>

            <MenuItem name="ExaminationList">
            <Icon type="ios-keypad"></Icon>考次管理
            </MenuItem>

            <Submenu name="ExamPlanManage">
              <template slot="title">
                <Icon type="ios-globe"></Icon>考试计划管理
              </template>
              <MenuItem name="ExamSessionWithoutPlan">设置考次对应专业计划</MenuItem>
              <MenuItem name="ExamSessionWithoutCourse">设置考次开考课表</MenuItem>
            </Submenu>

            <MenuItem name="NewMajor">
            <Icon type="ios-keypad"></Icon>专业申报
            </MenuItem>
          </Menu>
        </Sider>
        <BackTop :height="100" :right="8"></BackTop>
        <Layout :style="{padding: '10px 60px 10px 10px'}">
          <Content :style="{padding: '24px', minHeight: '700px',background: '#fff'}">
            <router-view />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userName: this.$route.params.userName,
        name: this.$route.params.userName.substr(0, 1),
        isCollapsed: false,
        subm: ["MajorPlanManage"]
      };
    },
    computed: {
      rotateIcon() {
        return ["menu-icon", this.isCollapsed ? "rotate-icon" : ""];
      },
      menuitemClasses() {
        return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
      }
    },
    created() {
      if (this.$route.name == "Home")
        this.$router.push({
          name: "MajorPlan"
        });
      if (this.$cookies.isKey("subm")) {
        this.subm.pop();
        this.subm.push(this.$cookies.get("subm"));
      }
    },
    methods: {
      submenu(name) {
        this.$cookies.set("subm", name);
      },
      menu(name) {
        switch (name) {
          case "MajorPlan":
            this.$router.push({ name: "MajorPlan" });
            break;
          case "MajorLibrary":
            this.$router.push({ name: "MajorLibrary" });
            break;
          case "MajorClass":
            this.$router.push({ name: "MajorClass" });
            break;
          case "NationMajor":
            this.$router.push({ name: "NationMajor" });
            break;
          case "CourseLibrary":
            this.$router.push({ name: "CourseLibrary" });
            break;
          case "NationCourse":
            this.$router.push({ name: "NationCourse" });
            break;
          case "SetMajorCourse":
            if (this.$route.name != "SetMajorCourse") {
              this.$Notice.error({
                title: "未选择专业",
                desc: "请到省专业库选择专业"
              });
            }
            break;
          case "ExaminationList":
            this.$router.push({ name: "ExaminationList" });
            break;
          case "ExamSessionWithoutPlan":
            this.$router.push({ name: "ExamSessionWithoutPlan" });
            break;
          case "ExamSessionWithoutCourse":
            this.$router.push({ name: "ExamSessionWithoutCourse" });
            break;
          case "NewMajor":
            this.$router.push({ name: "NewMajor" });
            break;
        }
      },
      collapsedSider() {
        this.$refs.side1.toggleCollapse();
      },
      flesh() {
        this.$router.go(0);
      },

      logout() {
        this.$Modal.confirm({
          title: "注销",
          content: "<p>确认要退出登录吗？</p>",
          scrollable: true,
          onOk: () => {
            this.$axios.post(this.$host + "/account/logout", {}).then(res => {
              this.$router.push({
                path: "/"
              });
              this.$Message.success("注销成功!");
              this.$cookies.remove("subm");
              this.$cookies.remove("tapname");
            });
          }
        });
      }
    }
  };
</script>